<template>
    <div class="wl-page wl-flexview" :class="{'background-color-my':userBg}">
        <div class="wl-scrollview">
            <router-view></router-view>
        </div>
        <van-tabbar v-model="active" class="wl-tabbar" :fixed="false" @change="tabChange" v-if="isShow">
            <van-tabbar-item icon="idcard" to="/epidemic-situation-index">防疫情</van-tabbar-item>
            <van-tabbar-item icon="thumb-circle-o" to="/gov-index-v2">云应用</van-tabbar-item>
            <van-tabbar-item icon="home-o" to="/city-card-index-v3">省心办</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/mine-index-v2">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
// import { userLogin } from '@/api/user'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      active: 0,
      userBg: false
    }
  },
  mounted () {
    if (this.$common.xeUtils.locat().host !== 'sst.tripln.top' && this.$common.xeUtils.locat().host !== 'sst.wanglanglang.com') {
      // userLogin().then(ret => {
      //   console.log(ret, '调用登录接口')
      // })
    }
    let menus = ['/city-card-index-v3', '/gov-index-v2', '/shop-index-v2', '/mine-index-v2']
    let show = false
    if (menus[3] === this.$route.path) {
      this.userBg = true
    } else {
      this.userBg = false
    }
    menus.forEach((item, index) => {
      if (item === this.$route.path) {
        this.active = index
        this.setNavIndex(index)
        show = true
      }
    })
    this.setNavBarShow(show)
    console.log('初始化', this.$route.path)
  },
  computed: {
    menuState () {
      return this.active
    },
    isShow () {
      return this.$store.state.app.navBarShow
    }
  },
  methods: {
    ...mapActions([
      'setNavIndex',
      'setNavBarShow'
    ]),
    tabChange (index) {
      this.setNavIndex(index)
      console.log(index)
    }
  },
  watch: {
    $route (to) {
      let menus = ['/city-card-index-v3', '/gov-index-v2', '/shop-index-v2', '/mine-index-v2']
      let show = false
      if (menus[3] === to.path) {
        this.userBg = true
      } else {
        this.userBg = false
      }
      menus.forEach((item, index) => {
        if (item === to.path) {
          this.active = index
          this.setNavIndex(index)
          show = true
        }
      })
      this.setNavBarShow(show)
      console.log(to)
    }
  }
}
</script>
<style>
    @import "../assets/common.css";
    @import "../assets/icons/iconfont.css";

    .wl-page {
        background-color: white;
        height: 100%;
    }

    .background-color-my {
        background-color: #F5F5F5;
    }
</style>
